<template>
<!-- 评价信息 -->
<div class="main">
  <el-dialog
  title="评价内容"
  :visible.sync="dialogVisible"
  width="30%">
  <span>{{tComent}}</span>
  <div style="margin: 20px 0;"></div>
  <el-rate
    v-model="value"
    show-text>
  </el-rate>

</el-dialog>
<el-dialog
  title="教师申请"
  :visible.sync="applyShow"
  width="38%">
  <el-input
  type="textarea"
  :rows="2"
  placeholder="驳回时请填写原因"
  v-model="textarea">
</el-input>
<div style="margin-top:18px">
  <el-tooltip class="item" effect="dark"  content="通过" placement="top-start">
      <el-button type="primary" size="mini" @click="bindOk" icon="el-icon-circle-check"></el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="驳回" placement="top-start">
      <el-button type="danger" size="mini" @click="disbinding" icon="el-icon-circle-close"></el-button>
    </el-tooltip>
</div>

</el-dialog>
<!-- 活动信息 -->
      <!-- 项目信息详情 -->
      <el-dialog
  title="活动信息"
  :visible.sync="itemiDalogVisible"
  width="50%">
  <div class="itemArea"  style="font-size:18px">
    <div class="top" style="display:flex;justify-content:space-around">
      <div class="top-l" style="width:200px;height:200px">
        <img style="width:100%;height:100%" :src="evUrl+form.item_pic"/>
      </div>
      <div class="top-r" style="padding-top:18px;margin-bottom:10px">
        <div style="margin-bottom:10px">活动标题：{{form.item_tit}}</div>
        <div style="margin-bottom:10px">服务时长：{{form.service_time}}</div>
        <div style="margin-bottom:10px">联系人：{{form.contacts}}</div>
        <div style="margin-bottom:10px">手机号码：{{form.phone}}</div>
        <div style="margin-bottom:10px">岗位名称：{{form.station}}</div>
        <div style="margin-bottom:10px">岗位人数：{{form.num}}</div>
        <div style="margin-bottom:10px">活动地址：{{form.addr}}</div>
        <div style="margin-bottom:10px">活动描述：{{form.item_describe}}</div>
        <!-- <div style="margin-bottom:10px">报名开始时间：{{form.startTime}}</div>
        <div style="margin-bottom:10px">报名截止时间：{{form.endTime}}</div> -->
        <div>活动类型：{{form.item_type}}</div>
      </div>
    </div>
  </div>
</el-dialog>
<!-- 教师信息 -->
  <el-dialog
     title="教师信息"
     top='5vh'
     :visible.sync="teacherDialogVisible"
     width="58%">
     <div class="details">
      <div class="detail-l">
        <div class="imgDiv"><img :src="evUrl+(teachetInfo.t_pic)" alt="暂无图片"/></div>
      </div>
      <div class="detail-r">
        <ul class="iteminfo">
          <li>姓名：{{teachetInfo.t_real_name? teachetInfo.t_real_name:'暂无数据'}}</li>
          <li>性别：{{teachetInfo.t_sex? teachetInfo.t_sex:'暂无数据'}}</li>
          <li>联系电话：{{teachetInfo.t_phone? teachetInfo.t_phone:'暂无数据'}}</li>
          <li>地址：{{teachetInfo.t_addr? teachetInfo.t_addr:'暂无数据'}}</li>
          <li>民族：{{teachetInfo.native_place? teachetInfo.native_place:'暂无数据'}}</li>
          <li>专业：{{teachetInfo.major? teachetInfo.major:'暂无数据'}}</li>
          <li>生日：{{teachetInfo.birth? teachetInfo.birth:'暂无数据'}}</li>
          <li>支教次数：{{teachetInfo.t_count}}</li>
          <li>毕业学校：{{teachetInfo.t_university? teachetInfo.t_university:'暂无数据'}}</li>
          <li>电子邮箱：{{teachetInfo.t_email? teachetInfo.t_email:'暂无数据'}}</li>
        </ul>
          <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </div>
     </div>
    </el-dialog>
  <el-table
    :data="tableData"
    style="width: 100%"
    size="medium"
    :cell-style="{textAlign:'center',padding:'7px'}"
    :header-cell-style="{background:'purple',color:'#ffffff',textAlign:'center',padding:'3px',opacity:0.7}">
    <el-table-column
      label="教师"
      prop="t_name">
    </el-table-column>
    <el-table-column
    label="教师信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="techerDatails(scope.row)">教师信息</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="活动信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="itemDatails(scope.row)">活动信息</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="状态">
      <template slot-scope="scope">
        <el-tag>{{scope.row.status==1? '已完成':'进行中'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
    label="评价">
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.comment"
          size="mini"
          @click="lookIt(scope.row)">查看</el-button>
          <el-button
          v-else
          size="mini" disabled>暂无</el-button>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.isBinding==2"
          size="mini"
          type="danger"
          @click="doBinding(scope.row)">教师申请</el-button>
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入教师关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.status!=1"
          size="mini"
          @click="makeOk(scope.row)">完成</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="footer" style="position:absolute;right:0;bottom:0">
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</div>
</div>

</template>

<script>
import { makeRecord, overRecord, getTeacherd, getAtivityd, deleteRecord } from '../api/record'
import { makeBinding } from '../api/info'

export default {
  data () {
    return {
      evUrl: this.$evUrl,
      // 数量
      total: 0,
      currentPage: 1,
      tableData: [],
      newTableData: [],
      search: '',
      dialogVisible: false,
      tComent: '',
      value: null,
      textarea: '',
      itemiDalogVisible: false,
      teacherDialogVisible: false,
      applyShow: false,
      teachetInfo: {},
      form: {},
      newRow: {}
    }
  },
  methods: {
    // 页码变化
    handleCurrentChange (val) {
      this.currentPage = val
      this.tableData = this.newTableData.slice(this.currentPage * 10 - 10, this.currentPage * 10)
    },
    // 教师申请
    doBinding (row) {
      this.newRow = row
      this.applyShow = true
    },
    // 驳回
    disbinding () {
      makeBinding({ w_id: this.newRow.w_id, isBinding: '3', bindReson: this.textarea }).then(({ data }) => {
        let index = 0
        this.tableData.forEach(ele => {
          if (ele == this.newRow) {
            index = this.tableData.indexOf(ele)
          }
        })
        // console.log(data)
        if (data.status == 200) {
          this.tableData[index].isBinding = '3'
          this.$message.info('已驳回')
          this.applyShow = false
        }
      })
    },
    // 通过
    bindOk () {
      deleteRecord({ wId: this.newRow.w_id }).then(({ data }) => {
        // console.log(data)
        if (data.status == 200) {
          this.applyShow = false
          this.getRecord()
          this.$message.success('请求通过')
        }
      })
    },
    // 完成记录
    makeOk (row) {
      if (row.isBinding == '2') {
        this.$message.info('请审核教师申请')
      } else {
        overRecord({ w_id: row.w_id }).then(({ data }) => {
          this.getRecord()
          this.$message.success(data.message)
        })
      }

      // console.log(row)
    },
    // 获取记录
    getRecord () {
      const sId = window.localStorage.getItem('id')
      makeRecord({ sId: sId }).then(({ data }) => {
        this.newTableData = data
        this.total = data.length
        this.tableData = this.newTableData.slice(0, 10)
      })
    },
    // 查看评价
    lookIt (row) {
      this.dialogVisible = true
      this.tComent = row.comment
      this.value = row.level
      // console.log(row)
    },
    // 教师信息
    techerDatails (row) {
      getTeacherd({ tId: row.t_id }).then(({ data }) => {
        // console.log(data.details)
        this.teachetInfo = JSON.parse(JSON.stringify(data.details))
      })
      // console.log(row)
      this.teacherDialogVisible = true
    },
    // 活动信息
    itemDatails (row) {
      this.itemiDalogVisible = true
      getAtivityd({ iId: row.itemId }).then(({ data }) => {
        this.form = JSON.parse(JSON.stringify(data.list))
        this.form.activityTime = [data.list.startTime, data.list.endTime]
        const endTime = Date.parse(data.list.endTime)
        const nowTime = Date.parse(new Date())
        if (endTime <= nowTime) {
          this.form.status = '活动已经结束'
        } else {
          this.form.status = '进行中！'
        }
      })
    }
  },
  watch: {
    'search' (newVal, oldVal) {
      const newArr = this.newTableData.filter(data => !this.search || data.t_name.includes(this.search))
      // console.log(newArr)
      this.total = newArr.length
      this.tableData = newArr.slice(this.currentPage * 10 - 10, this.currentPage * 10)
    }

  },
  mounted () {
    this.getRecord()
  }
}
</script>
<style scoped lang='less'>
.main{
  .details{
      display: flex;
      height: 400px;
      padding-bottom: 38px;
      .detail-l{
        width:30%;
        .imgDiv{
          width: 80%;
          img{
            width: 100%;
          }
        }
      }
      .detail-r{
        width:60%;

        .iteminfo{
          padding: 0;
          font-size:18px;
          li{
            list-style: none;
            padding-left: 20px;
            border-bottom: 1px solid purple;
            padding-bottom: 5px;
            margin-bottom: 10px;

          }
        }
      }
    }
}

</style>
